<template>
  <view class="project-container">
    <!-- 项目列表 -->
    <view class="project-list">
      <view 
        class="project-card" 
        v-for="(project, index) in projectArr" 
        :key="index"
        @tap="navigateToDetail"
      >
        <view class="project-title">{{ project.name }}</view>
        <view class="project-tags">
          <view 
            class="tag" 
            :class="getTagClass(tag)" 
            v-for="(tag, tagIndex) in project.tags" 
            :key="tagIndex"
          >
            {{ tag }}
          </view>
        </view>
        <view class="project-info">
          <view class="info-item">
            <text class="iconfont icon-location"></text>
            <text class="info-text">{{ project.address }}</text>
          </view>
          <view class="info-item">
            <text class="iconfont icon-calendar"></text>
            <text class="info-text">{{ project.date }} | {{ project.duration }}</text>
          </view>
        </view>
        <view 
          class="project-status" 
          :class="getStatusClass(project.status)"
        >
          {{ project.status }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import http from '/pages/utils/request'

// 项目数据
const projectList = ref([])

// 项目对象模板
const projectObj = {
  name: "项目名称",
  status: "状态",
  role: "角色",
  address: "地址",
  date: "日期",
  duration: "持续时间",
  tags: ["标签1", "标签2", "标签3"]
}

// 项目列表数组 - 基于projectObj模板的示例数据
const projectArr = ref([
  {
    name: "梅赛德斯高尔夫项目",
    status: "招募中",
    role: "礼仪",
    address: "长白山万达喜来登度假酒店",
    date: "2025.6.23",
    duration: "3天",
    tags: ["礼仪", "兼职", "带队"]
  },
  {
    name: "宝马试驾活动",
    status: "待补充",
    role: "试驾专员",
    address: "北京金港国际赛车场",
    date: "2025.7.15",
    duration: "2天",
    tags: ["礼仪", "兼职"]
  },
  {
    name: "奥迪新品发布会",
    status: "报名中",
    role: "礼仪接待",
    address: "上海国际会议中心",
    date: "2025.8.10",
    duration: "1天",
    tags: ["礼仪"]
  },
  {
    name: "奔驰商务会议",
    status: "已完结",
    role: "会议服务",
    address: "广州四季酒店",
    date: "2025.5.20",
    duration: "1天",
    tags: ["礼仪"]
  }
])

// 获取项目列表数据
const fetchProjectData = async () => {
  try {
    const data = await http.post('/getFilterRows', {
      "appKey": "9101fca7a5471bb6",
      "sign": "OTU0Y2M5NzIwNzgwYzM4OGMwMjk1Nzc2NmIwZjUzZjk4NzEyNTFlYjg3YzA3MjIzNWVhZjEwMzJlYTE2Zjc5Zg==",
      "worksheetId": "6876257b872d9db2c7ba529a",
      "viewId": "",
      "pageSize": 10,
      "pageIndex": 1,
      "notGetTotal": true,
      "filters":[
      ]
    })

    projectList.value = data.rows

      const projectObj = {
         name: "项目名称",
         status: "状态",
         role: "角色",
         address: "地址",
         date: "日期",
         duration: "持续时间",
         tags: ["标签1", "标签2", "标签3"]
      }
    console.log('==========');
    
    console.log(data.rows);
    


  } catch (error) {
    console.error('获取项目数据失败:', error)
    // 错误已在request.js中统一处理，这里可以添加额外逻辑
  }
}

const getProject = async () => {
  const projectObj = {
  name: "项目名称",
  status: "状态",
  role: "角色",
  address: "地址",
  date: "日期",
  duration: "持续时间",
  tags: ["标签1", "标签2", "标签3"]
}
// console.log('==========');

// console.log(projectList.value);


}


// 页面加载时调用API
onLoad(async(options) => {
  console.log('项目页面加载完成', options)
 await fetchProjectData()
 await getProject()
})

// 跳转到职位详情页面
const navigateToDetail = () => {
  uni.navigateTo({
    url: '/pages/tabs/project/detail/position'
  })
}


// 根据标签获取对应的样式类名
const getTagClass = (tag) => {
  const tagClassMap = {
    '礼仪': 'tag-ceremony',
    '兼职': 'tag-parttime',
    '带队': 'tag-leader',
    '试驾': 'tag-testdrive',
    '发布会': 'tag-launch',
    '接待': 'tag-reception',
    '会议': 'tag-meeting',
    '服务': 'tag-service'
  }
  return tagClassMap[tag] || ''
}

// 根据状态获取对应的样式类名
const getStatusClass = (status) => {
  const statusClassMap = {
    '招募中': 'recruiting',
    '待补充': 'supplement',
    '报名中': 'applying',
    '已完结': 'completed'
  }
  return statusClassMap[status] || ''
}
</script>

<style scoped>
/* 项目列表页面样式 */
.project-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
}

/* 页面级样式 */
page {
  background-color: #f5f5f5;
}

/* 项目卡片样式 */
.project-card {
  position: relative;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 点击态样式 */
.project-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 项目标题 */
.project-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

/* 项目标签容器 */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

/* 标签基础样式 */
.tag {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  color: #333; /* 将所有标签文字颜色修改为黑色 */
}

/* 礼仪标签 - 粉色 */
.tag-ceremony {
  background-color: rgba(255, 107, 155, 0.1);
}

/* 兼职标签 - 蓝色 */
.tag-parttime {
  background-color: rgba(62, 123, 250, 0.1);
}

/* 带队标签 - 橙色 */
.tag-leader {
  background-color: rgba(255, 154, 62, 0.1);
}

/* 项目信息区域 */
.project-info {
  display: flex;
  flex-direction: column;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

/* 图标样式 - 使用伪元素替代实际图标 */
.iconfont {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-location::before {
  content: "📍";
  font-size: 24rpx;
}

.icon-calendar::before {
  content: "📅";
  font-size: 24rpx;
}

/* 信息文本 */
.info-text {
  font-size: 24rpx;
  color: #999;
}

/* 项目状态标签 */
.project-status {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: 500;
}

/* 招募中状态 */
.recruiting {
  background: linear-gradient(to right, #FF6B9B, #FF9E9E);
  color: #fff;
}

/* 待补充状态 */
.supplement {
  background: linear-gradient(to right, #FFA53E, #FFD86F);
  color: #fff;
}

/* 报名中状态 */
.applying {
  background: linear-gradient(to right, #A17BFC, #C9A9FF);
  color: #fff;
}

/* 已完结状态 */
.completed {
  background-color: #999;
  color: #fff;
}

/* 试驾标签 - 绿色 */
.tag-testdrive {
  background-color: rgba(46, 204, 113, 0.1);
}

/* 发布会标签 - 紫色 */
.tag-launch {
  background-color: rgba(155, 89, 182, 0.1);
}

/* 接待标签 - 青色 */
.tag-reception {
  background-color: rgba(26, 188, 156, 0.1);
}

/* 会议标签 - 棕色 */
.tag-meeting {
  background-color: rgba(211, 84, 0, 0.1);
}

/* 服务标签 - 灰色 */
.tag-service {
  background-color: rgba(149, 165, 166, 0.1);
}
</style>